<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <!-- <script src="./bootstrap/js/bootstrap.js"></script> -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="box">

        <div class="top">

            <div class="top-left">
                <span></span>
                <p>榜单</p>
            </div>

            <div class="top-right">
                <p><a>更多</a></p>
                <span></span>
            </div>

        </div>


        <div class="bottom">

            <div class="bottom-diyi">
                <img src="./images/飙升榜.jpg" style="width: 80px; height: 80px;" alt="">
                <div class="img-name1">
                    <h3 title="飙升榜">飙升榜</h3>
                    <span class="span1" title="播放"></span>
                    <span class="span2" title="收藏"></span>
                </div>
            </div>

            <div class="bottom-diyi">
                <img src="./images/新歌榜.jpg" style="width: 80px; height: 80px;" alt="">
                <div class="img-name1">
                    <h3 title="新歌榜">新歌榜</h3>
                    <span class="span1" title="播放"></span>
                    <span class="span2" title="收藏"></span>
                </div>
            </div>

            <div class="bottom-diyi">
                <img src="./images/原创榜.jpg" style="width: 80px; height: 80px;" alt="">
                <div class="img-name1">
                    <h3 title="原创榜">原创榜</h3>
                    <span class="span1" title="播放"></span>
                    <span class="span2" title="收藏"></span>
                </div>
            </div>

            
            <div class="bottom-list">

                <ul>
                    <li>
                        <p>1</p>
                        <a href="" title="删了吧">删了吧
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>2</p>
                        <a href="" title="浪漫主义">浪漫主义
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>3</p>
                        <a href="" title="路过人间">路过人间
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>4</p>
                        <a href="" title="指纹">指纹
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>5</p>
                        <a href="" title="Bite Me">Bite Me
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>6</p>
                        <a href="" title="没你也能活下去">没你也能活下去
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>7</p>
                        <a href="" title="都不懂">都不懂
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>8</p>
                        <a href="" title="百年孤寂">百年孤寂
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>9</p>
                        <a href="" title="水中花">水中花
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>10</p>
                        <a href="" title="光亮">光亮
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        
                        <a href="">查看全部&gt;</a>

                    </li>
                </ul>

                <ul>
                    <li>
                        <p>1</p>
                        <a href="" title="删了吧">一则废话
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>2</p>
                        <a href="" title="浪漫主义">不会大声说话
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>3</p>
                        <a href="" title="路过人间">信号失灵
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>4</p>
                        <a href="" title="指纹">Another Time
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>5</p>
                        <a href="" title="Bite Me">小丑马戏
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>6</p>
                        <a href="" title="没你也能活下去">暴雨中
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>7</p>
                        <a href="" title="都不懂">异地恋
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>8</p>
                        <a href="" title="百年孤寂">入冬
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>9</p>
                        <a href="" title="水中花">知寒
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>10</p>
                        <a href="" title="光亮">STAY
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        
                        <a href="">查看全部&gt;</a>

                    </li>
                </ul>

                <ul>
                    <li>
                        <p>1</p>
                        <a href="" title="删了吧">删了吧
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>2</p>
                        <a href="" title="浪漫主义">浪漫主义
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>3</p>
                        <a href="" title="路过人间">路过人间
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>4</p>
                        <a href="" title="指纹">指纹
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>5</p>
                        <a href="" title="Bite Me">Bite Me
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>6</p>
                        <a href="" title="没你也能活下去">没你也能活下去
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>7</p>
                        <a href="" title="都不懂">都不懂
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>8</p>
                        <a href="" title="百年孤寂">百年孤寂
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>9</p>
                        <a href="" title="水中花">水中花
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        <p>10</p>
                        <a href="" title="光亮">光亮
                            <div class="span-btn">
                                <span title="播放"></span>
                                <p title="添加到播放列表">＋</p>
                                <span title="收藏"></span>
                              </div>
                        </a>

                    </li>
                    <li>
                        
                        <a href="">查看全部&gt;</a>

                    </li>
                </ul>
            </div>
            

        </div>

    </div>
</body>
</html>